<!DOCTYPE html>
[#escape x as (x)!?html]
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>基本设置 - ${site.seoTitle} - Powered by JPROCMS</title>
    [#include '../includes/common_res.html'/]
    <link
      rel="stylesheet"
      href="${resource}/static/plugins/flatpickr/dist/flatpickr.min.css"
    />
    <script src="${resource}/static/plugins/flatpickr/dist/flatpickr.min.js"></script>
    <script src="${resource}/static/plugins/flatpickr/dist/l10n/index.js"></script>
  </head>
  <body>
    [#assign shadowNav=true/] [#include '../includes/header.html'/]
    <div class="container mt-3">
      <div class="row">
        <div class="col-sm-3">
          <div class="list-group mt-2">
            [#assign settings = 'profile'/] [#include 'user_left.html'/]
          </div>
        </div>
        <div class="col-sm-9">
          <h3 class="py-3 border-bottom">基本设置</h3>
          <form
            id="validForm"
            class="mt-3"
            action="${api}/member/update"
            method="post"
          >
            <div class="form-group">
              <label for="nickname">用户昵称</label>
              <input
                type="text"
                class="form-control"
                name="nickname"
                id="nickname"
              />
            </div>
            <div class="form-group">
              <label for="email">邮箱</label>
              <input
                type="text"
                class="form-control"
                id="email"
                name="email"
                maxlength="150"
              />
            </div>
            <div class="form-group">
              <label for="sex">性别</label>
              <select class="form-control" id="sex" name="sex">
                <option value="0">保密</option>
                <option value="1">男</option>
                <option value="2">女</option>
              </select>
            </div>
            <div class="form-group">
              <label for="mobile">手机号</label>
              <input
                type="text"
                class="form-control"
                id="mobile"
                name="mobile"
                maxlength="150"
              />
            </div>
            <button type="submit" class="btn btn-primary">保存</button>
          </form>
        </div>
      </div>
    </div>
    [#include '../includes/footer.html'/] [#include '../includes/inc_msg.html'/]
    <script>
      $(function () {
        Cms.getLoginUser("${base}", "${api}", false, loginedCallBack);
        $("#validForm").validate({
          submitHandler: function (form, event) {
            event.preventDefault();
            const token = sessionStorage.getItem("accessToken");
            axios
              .post(form.action, $(form).serializeJSON(), {
                headers: {
                  "Tenant-Id": Cms.getTenantId(),
                  Authorization: "Bearer " + token,
                },
              })
              .then(function (response) {
                var data = response.data;
                if (data.code !== 0) {
                  alertTip(data.msg);
                } else {
                  successTip();
                }
                location.reload();
              });
          },
        });
      });
      function loginedCallBack(response) {
        $("#nickname").val(response.data.data.nickname);
        $("#email").val(response.data.data.email);
        $("#sex").val(response.data.data.sex);
        $("#mobile").val(response.data.data.mobile);
        $("#sex option[value='" + response.data.data.sex + "']").attr(
          "selected",
          "selected"
        );
      }
    </script>
  </body>
</html>
[/#escape]
